<template>
  <el-container class="home-container">
    <el-header>
      <span>diy数据大屏系统</span>
      <el-button class="baochun" @click="baochun">保存</el-button>
    </el-header>
    <el-container>
      <el-aside width="350px">
        <el-button class="anniu" @click="toshow">echarts图</el-button>
      </el-aside>
      <el-main>
        <template v-if="showechart == 'echarts'">
          <div
            id="myChart"
            :style="{ width: '300px', height: '300px' }"
            @contextmenu.prevent.native="openMenu($event)"
          ></div>

          <ul
            v-show="visible"
            :style="{ left: left + 'px', top: top + 'px' }"
            class="contextmenu"
          >
            <li>历史记录</li>
          </ul>
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  data() {
    return {
      showechart: "echarts",
      visible: false,
      top: 0,
      left: 0,
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "这是一个简单的柱状图" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
    toshow() {
      // this.showechart = "echarts";
      this.drawLine();
    },
    baochun() {},

    openMenu(e) {
      const menuMinWidth = 105;
      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
      const offsetWidth = this.$el.offsetWidth; // container width
      const maxLeft = offsetWidth - menuMinWidth; // left boundary
      const left = e.clientX - offsetLeft; // 15: margin right

      if (left > maxLeft) {
        this.left = maxLeft;
      } else {
        this.left = left;
      }

      this.top = e.clientY - 60; // fix 位置bug
      this.visible = true;
    },
    closeMenu() {
      this.visible = false;
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background: #243137;
  color: #ffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-aside {
  background: rgb(2, 47, 68);
  .anniu {
    height: 100px;
  }
}
.el-main {
  background: rgb(179, 248, 245);
}
.contextmenu{
  width: 200px;
  height: 200px;
  background: #000;
}
</style>

